 <!-- eslint-disable  -->
<template>
    <input id="switch_style" type="checkbox" v-model="data" @click="checkboxClick" :disabled="disable">
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		data: {
			type: Boolean,
			default() {
				return false
			}
		},
		disable: {
			type: Boolean,
			default() {
				return false
			}
		}
	},
	methods: {
		checkboxClick(e) {
			this.$emit('update:data', e.target.checked)
			this.$emit('changevalue', e.target.checked)
		}
	}
}
</script>

<style scoped>
#switch_style {
	/* 去掉原始状态 */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	position: relative;
	width: 64px;
	height: 20px;
	margin: 0px;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	transition: background-color 0.1s, border 0.1s;
	-webkit-appearance: none;
}

#switch_style::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 20px;
	border-radius: 4px;
	background-color: #5c5c5c;
	transition: left 0.3s;
}

/* 选中状态下，圆点的左边缘位置等于父级宽度减去自己的宽度使得靠右 */
#switch_style:checked:after {
	left: 32px;
	background: #288dfb;
}

#switch_style:disabled {
	background-color: #22ee2e;
}
</style>
